<template>
  <div class="hello">
    <form-btn>
      <template v-slot:btn-cancel="texts">
        {{text}}
      </template>

    </form-btn>
    <ul>
      <li v-for="(value,key) in someObject" :key="key">
        {{key}} : {{value}}
      </li>
    </ul>
    <ol>
      <li v-for="(item,index) in lis" :key="index">
        {{item.a}}
      </li>
    </ol>
    <div><button @click="calc">按钮</button></div>
    <div><button @click="plus">增加+</button></div>
  </div>
</template>

<script>
import formBtn from './slot-button.vue';
export default {
  name: 'HelloWorld',
  components:{
    "form-btn":formBtn
  },
  props: {
    msg: String
  },
  data:function(){
    return{
      text:'确dddddd认',
      x:1,
      y:2,
      val:null,
      color:'#f0f',
      number:'',
      someObject:{'a':1},
      lis:[{a:1},{a:4},{a:5}]
    }
  },
  computed:{
    sum:function(){
      return this.x + this.y + Number(this.val)
    }
  },
  methods:{
    add:function(){
      this.x+=1;
      console.log(this.sum)
      console.log(this.$el)
    },
    calc:function(){
      this.someObject.b=2
    },
    plus:function(){
      this.$set(this.someObject,'b',3)
      this.lis.push({a:2})
    }
  },
//   directives: {
//   blur: {

//   }
// },
  beforeCreate(){
    console.log('beforeCreate')
  },
  created(){
    console.log('created')
    console.log(this.$data)
    console.log(this.$props)
    console.log(this.$parent)
    console.log(this.$root)
    console.log(this.$refs)
    console.log('$data',this.$root.$data)
    // this.$set(this.someObject,'b',2)

    this.$on('test', function (msg) {
      console.log(msg)
    })
    this.$emit('test', 'hi')
    },
  beforeMount(){
    console.log('beforeMount')
  },
  mounted(){
    console.log(this.$el)
    console.log('mounted')
  },
  beforeUpdate(){
    console.log('beforeUpdate')
    this.$emit('test','更新')
  },
  updated(){
    console.log('updated')
  },
  beforeDestroy(){
    console.log('beforeDestroy')
  },
  destroyed(){
    console.log('destroyed')
  },
  watch:{
    val:function(news,old){
      console.log('-------watch',news,old)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
h3
  margin 40px 0 0

ul
  list-style-type none
  padding 0

li
  display block
  margin 0 10px

a
  color #42b983
</style>
